import React, { Component } from 'react'

//引入一个库 对props进行验证
import PropTypes from "prop-types";

function ChildCpns(props) {
  const { name, age, height, names } = props
  return (
    <div>
      <h2>{ name + age + height }</h2>
      <ul>
        {
          names.map(item => {
            return <li>{item}</li>
          })
        }
      </ul>
    </div>
  )
}

ChildCpns.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  height: PropTypes.number,
  names: PropTypes.array
}
ChildCpns.defaultProps = {
  name: 'default-yzh',
  age: 18,
  height: 1.88,
  names: ['111', '222', '333']
}

//类组件属性验证可以这样写 也可以像上面那种写法.propTypes 也是给类加属性
class ChildCpns2 extends Component {
  //es6中的 class fields 写法
  //加 static 是给类加属性 否则就是给对象加属性 
  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number
  }

  static defaultProps = {
    name: 'hzy',
    age: 18
  }

  render() {
    const { name, age } = this.props
    return <h2>ChildCpns2：{name + '-' + age}</h2>
  }
}

export default function App() {
  return (
    <div>
      <ChildCpns 
        name="yzh" 
        age={18} 
        height={1.88} 
        names={["ace", "sabo", "luffy"]} 
      />
      <ChildCpns />
      <hr />

      <ChildCpns2 />
    </div>
  )
}
